<!DOCTYPE html>
<html lang="en">
<!--    课程：黑马程序员  《4个小时带你快速入门vue》
        地址：https://www.bilibili.com/video/BV12J411m7MG -->
<!-- P25 -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 引入 axios.js  基于ajax的异步请求包 官网：https://github.com/axios/axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
                .then(function (response) {
                    console.info(response)
                }, function (err) {
                    console.info(err)
                })
        }

        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
            .then(function (response) {
                    console.info(response)
                    console.info(this.skill)
                }, function (err) {
                    console.info(err)
                })
        }

    </script>


</body>


</html>